<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<video id="video" width="534" height="400" autoplay="autoplay" src=""></video>
<canvas id="canvas" width="534" height="400"></canvas>
<button id="bnt">验证</button>
</body>
<script>
    $(function(){
        var video=document.getElementById("video");
        //调用摄像头流，获取媒体视屏流
        var getUserMedia=(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia|| navigator.msGetUserMedia);
        //getUserMedia.call调用约束对象，要调用的对象，调用成功的方法，失败的方法
        getUserMedia.call(navigator,{video:true,audio:false},function(localMediaStream){
            video.srcObject = localMediaStream;
        },function(e){
            alert("获取摄像头失败,请检查是否有摄像头");
        });
    });

    $("#bnt").click(function(){
        var context=canvas.getContext("2d");
        //      画图  1,video,2开始x，3y开始位置，4x结束位置，5y结束位置
        context.drawImage(video,0,0,534,400);
        var imgSrc =document.getElementById("canvas").toDataURL("image/png");
        var faceBase=imgSrc.split(",")[1];
        //ajax异步请求到java后台
        $.ajax({
            url:"ocrController/ocrimg",
            type:"post",
            data:{"faceBase":faceBase},
            success: function(result){
                alert(result);
            }
        });
    })
</script>
</html>